<form action="" class="form-horizontal" role="form">
  
  <div class="form-group">
    <label class="col-sm-2 control-label">商品名称</label>
    <div class="col-sm-4">
      <input type="text" class="form-control" name="name" placeholder="请输入商品名称" datatype="*" value="{$product.name}">
    </div>
  </div>
  
  <div class="form-group">
    <label class="col-sm-2 control-label">商品图片地址</label>
    <div class="col-sm-6">
      <input type="text" class="form-control margin-bottom" readonly="readonly" name="pic" id="pic" datatype="*" placeholder="请上传商品图片" value="{$product.pic}">
      <input type="file" name="file_upload" id="image_upload">
    </div>
  </div>
  
  <div class="form-group">
    <label class="col-sm-2 control-label">商品类目</label>
    <div class="col-sm-6">
      <div class="row">
        <div class="col-sm-4">
          <input type="text" class="form-control" disabled="true" id="class-control" placeholder="请选择商品类目">
          <input type="hidden" name="class_id" id="class-id" value="{$product.class_id}">
        </div>
        <div class="col-sm-2">
          <span class="btn btn-info" id="class-select">选择类目</span>
        </div>
      </div>
      <ul id="class-content" class="ztree"></ul>
    </div>
  </div>
  
  <div class="form-group">
    <label class="col-sm-2 control-label">商品品牌</label>
    <div class="col-sm-6">
      <div class="row">
        <div class="col-sm-4">
         	<select id="product_brand" name="brand" class="form-control">{$product.brandOptions}</select>
        </div>
      </div>
    </div>
  </div>
  
  <div class="form-group">
    <label class="col-sm-2 control-label">商品功效</label>
    <div class="col-sm-6">
      <div class="row">
        <div class="col-sm-9 product_efficiency">{$product.efficiencyCheckbox}</div>
      </div>
    </div>
  </div>
  
  
  <div class="form-group">
    <label class="col-sm-2 control-label">商品原价</label>
    <div class="col-sm-2">
      <input type="text" class="form-control" name="price_high" placeholder="输入价格信息" value="{$product.price_high}">
    </div>
  </div>
  
  <div class="form-group">
    <label class="col-sm-2 control-label">商城价</label>
    <div class="col-sm-2">
      <input type="text" class="form-control" name="price" placeholder="输入价格信息" value="{$product.price}">
    </div>
  </div>
  
  <div class="form-group">
    <label class="col-sm-2 control-label">价格属性</label>
    <div class="col-sm-2">
      <select name="price_attribute" class="form-control">{$product.priceAttributes}</select>
    </div>
  </div>
  
  <div class="form-group">
    <label class="col-sm-2 control-label">是否促销</label>
    <div class="col-sm-4" id="is-low">
      {$product.is_low}
    </div>
  </div>
  
  <div class="form-group none" id="is-low-up">
    <label class="col-sm-2 control-label">促销价</label>
    <div class="col-sm-2">
      <input type="number" class="form-control" name="price_low" placeholder="折扣价格，没有则不填" value="{$product.price_low}">
    </div>
  </div>
 
  <div class="form-group">
    <label class="col-sm-2 control-label">初始销量</label>
    <div class="col-sm-2">
      <input type="number" class="form-control" name="saled_base" value="{$product.saled_base}" placeholder="输入初始销量" min="1">
    </div>
  </div>
 
  <div class="form-group">
    <label class="col-sm-2 control-label">商品内容</label>
    <div class="col-sm-6">
      <script id="content" type="text/plain">{$product.content}</script>
    </div>
  </div>
  
  <div class="form-group">
    <label class="col-sm-2 control-label">运费</label>
    <div class="col-sm-6" id="is-shipping">
      {$product.is_shipping}
    </div>
  </div>
  
  <div class="form-group none" id="is-shipping-up">
    <label class="col-sm-2 control-label">运费价格</label>
    <div class="col-sm-6">
		  <label for="isApplyPostage_false">平邮：</label><input type="text" class="text text-short" maxlength="6" id="pyTF" name="shipping[0]" value="{$product['shipping'][0]?$product['shipping'][0]:5}"> 元
		  <label>快递：</label><input type="text" class="text text-short" maxlength="6" id="kdTF" name="shipping[1]" value="{$product['shipping'][1]?$product['shipping'][1]:'10'}"> 元
		  <label>EMS：</label><input type="text" class="text text-short" maxlength="6" id="emsTF" name="shipping[2]" value="{$product['shipping'][2]?$product['shipping'][2]:10}"> 元
    </div>
  </div>
  
  <div class="form-group">
    <label class="col-sm-2 control-label">商品状态</label>
    <div class="col-sm-6">
      {$product.status}
    </div>
  </div>
  
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-8">
      <a class="btn btn-default" onclick="javascript:history.go(-1)">返回上页</a>
      <a class="btn btn-default" onclick="self.location=document.referrer">返回上页并刷新</a>
      <input type="hidden" name="cat_id" value="{$cat_id}">
      <input type="hidden" name="id" value="{$product.id}">
      <button type="submit" class="btn btn-primary submit" data-loading-txt="提交中，请稍后……" data-ajax-url="__CONTROLLER__/modifyPost">保存更改</button>
    </div>
  </div>
</form>

<style type="text/css">
  .user {
    position: relative;
  }
  .user-list {
    position: absolute;
    top: 100%;
    left: 15px;
    right: 15px;
    display: none;
    z-index: 10;
    max-height: 150px;
    overflow: auto;
    background-color: #fff;
    border: 1px solid #ccc;
  }
  .user-list li {
    padding: .4em;
    border-bottom: 1px solid #e9e9e9;
  }
  .user-list li:last-of-type {
    border-bottom: none;
  }
  .user-list li:hover {
    background-color: #eee;
  }
  .user-list .user-name {
    font-weight: 500;
  }
  .user-list .user-email {
    float: right;
    font-size: .8em;
  }
</style>

<!-- zTree -->
<style type="text/css">
  #class-control { position:relative; }
  #class-content { position:absolute; top:40px; left:15px; z-index:1000; display:none; background:#fff; border:1px solid #ccc; box-shadow:0 0 10px rgba(0,0,0,.25); }
</style>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Style/Common/zTreeStyle/zTreeStyle.css">
<script src="__PUBLIC__/Style/Common/zTreeStyle/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript">
	
  $.post("__CONTROLLER__/classPost", {}, function(data){
    var category = data.extra;
    selectClass( category );
    $("#class-content").hide();
  });
  
  $("#class-select").on("click", function() {
    
    if ( $("#class-content").is(":hidden") ) {
      $("#class-content").fadeIn(400);
    	$(this).html( "关闭" );
    } else {
      $("#class-content").fadeOut(400);
      $(this).html( "选择类目" );
    }
    
  });
  
  //选择类目
  function selectClass ( category ) {
    var t = $("#class-content");
    var setting = {
      data: {
        simpleData: {
          enable:true,
          idKey: "id",
          pIdKey: "pid",
          rootPId: ""
        }
      },
      async: {
        autoParam:["id"],
        enable: true,
        url: "__CONTROLLER__/classPost",
        dataFilter: filter
      },
      callback: {
        onClick: function( event, treeId, treeNode ) {
           $("#class-control").val(treeNode.name);
           $("#class-id").val(treeNode.id);
           $.post( "__CONTROLLER__/updateClassBrandAndEfficiency", {"cls_id": treeNode.id}, function( data ) {
        	   $("#product_brand").html( data.extra.brandOptions );
        	   $(".product_efficiency").html( data.extra.efficiencyCheckbox );
           });
        },
      }
    }
    var treeObj = $.fn.zTree.init( t, setting, category );
    var default_path = "{$product.classPath}", default_path = default_path.split(',');
    $("#class-content").fadeIn(400);
    
    var current = 0;
    var currentNode = treeObj; currentNode['open'] = true;
    var nodes = currentNode.getNodes();
    
    (function expand() {
      if(default_path.length==current) { treeObj.selectNode(currentNode); $("#class-control").val( currentNode.name ); return; }
        var cnodes = nodes || (currentNode.open ? currentNode.children : false);
        nodes = null;
        if(!cnodes){ setTimeout(expand, 50); return;}
        for(var i=0; i<cnodes.length; i++){
          if(default_path[current] == cnodes[i]['id']) {
            treeObj.expandNode(cnodes[i], true, true, true);
            currentNode = cnodes[i], current++;
            setTimeout(expand, 50);
            break;
          }
        }
    })();

  }
  
  function filter (treeId, treeNode, responseData) {
    return responseData.extra;
  }
  
  $(function(){
	  
	  var ready = $("#is-low input:checked").val();
	  if ( ready == "1" ) {
		  toggleLowPrice( "show" )
	  } else {
		  toggleLowPrice( "hide" )
	  }
	  
	  $("#is-low input").on("change", function(){
		  var v = this.value;
		  if( v == 1 ) {
			  toggleLowPrice( "show" );
		  } else {
			  toggleLowPrice( "hide" );
		  }
	  });
	  
	  function toggleLowPrice( showHide ) {
		  showHide == "show" && $("#is-low-up").show();
		  showHide == "hide" && $("#is-low-up").hide();
	  };
  });
  
  $(function(){
	  
	  var ready = $("#is-shipping input:checked").val();
	  if ( ready == 0 ) {
		  toggleShippingPrice( "show" )
	  } else {
		  toggleShippingPrice( "hide" )
	  }
	  
	  $("#is-shipping input").on("change", function() {
		  var v = this.value;
		  if( v == 0 ) {
			  toggleShippingPrice( "show" );
		  } else {
			  toggleShippingPrice( "hide" );
		  }
	  });
	  
	  function toggleShippingPrice( showHide ) {
		  showHide == "show" && $("#is-shipping-up").show();
		  showHide == "hide" && $("#is-shipping-up").hide();
	  };
  });
  
  // 选择用户
  $( "#user-input" ).on( "keyup focus", function() {
    var v = $( this ).val();
    $.post( "__CONTROLLER__/getUserList", {"name": v}, function(data) {
      data.extra && showUserList( data.extra );
    });
  });
  
  $( "#user-input" ).on( "blur", function() {
    $( "#user-list" ).slideUp();
  });
  
  // 显示检索出的用户列表
  function showUserList( userList ) {
    var html = "";
    for(var i = 0; item = userList[i]; i++) {
      html += "<li data-email='"+ item.email +"' data-cid='" + item.id + "'><span class='user-name'>" + item.name + "</span><i class='user-email'>" + item.email + "</i></li>";
    };
    $( "#user-list" ).html( html ).slideDown();
  };
  
  // 点击选择检索出的列表
  $( "#user-list" ).delegate( "li", "click mouseover", function() {
    $( "#user-input" ).val( $(this).attr( "data-email" ) );
    $( "#user-cid" ).val( $(this).attr("data-cid") );
  });
  
</script>
  
<!-- uploadify -->
<link rel="stylesheet" href="__PUBLIC__/Style/Common/uploadify/uploadify.css">
<script src="__PUBLIC__/Style/Common/uploadify/jquery.uploadify.min.js?{:rand(0,9999)}"></script>
<script type="text/javascript">
$(function() {
  $("#image_upload").uploadify({
    'multi'      :  false,
    'fileSizeLimit'    :  '200kb',
    'buttonText'       :  '选择图片',
    'fileTypeDesc'     :  'Image Files',
    'fileTypeExts'     :  '*.jpg; *.png',
    'swf'              :  '__PUBLIC__/Style/Common/uploadify/uploadify.swf',
    'uploader'         :  '__MODULE__/Upload/uploadOne',
    'onUploadSuccess'  :  function(data, res){
      var url = eval("(" + res + ")").extra.url;
      $("#pic").val( url );
    }
  });
});
</script>

<!-- ueditor -->
<link rel="stylesheet" href="/ue/themes/default/css/ueditor.min.css">
<script type="text/javascript" src="/ue/ueditor.config.js"></script>
<script type="text/javascript" src="/ue/ueditor.all.js"></script>
<script type="text/javascript">
  window.UEDITOR_HOME_URL = "/ue/";
    var editor = UE.getEditor("content",{
      initialFrameWidth: "100%",
      initialFrameHeight: 300,
      textarea: "content"
    });
</script>